Export এবং Print Options কাস্টমাইজ করা

Web Development - অ্যাঙ্গুলার গুগল চার্ট (Angular Google Charts) - Chart Export এবং Printing (চার্ট এক্সপোর্ট এবং প্রিন্টিং) |
1
1

Google Charts API এর মাধ্যমে আপনি তৈরি করা চার্টকে Export এবং Print করার সুবিধা দিতে পারেন। এই বৈশিষ্ট্য ব্যবহারকারীদের চার্টটি এক্সপোর্ট করে PNG, PDF বা অন্যান্য ফরম্যাটে সংরক্ষণ বা প্রিন্ট করতে সহায়তা করে। Google Charts নিজে থেকে সরাসরি Export বা Print অপশন অফার করে না, তবে আপনি JavaScript বা Angular এর মাধ্যমে এই ফিচারটি ইমপ্লিমেন্ট করতে পারেন।

এখানে আমরা দেখব কিভাবে Export এবং Print অপশন কাস্টমাইজ করা যায়।


Step 1: Google Charts API এবং Angular Integration

এটি পূর্বে আলোচনা করা হয়েছে। প্রথমে আপনার অ্যাপে angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করতে হবে। আপনার app.module.ts এবং app.component.ts ফাইলগুলিতে GoogleChartsModule ইমপোর্ট করতে হবে।


Step 2: Chart Export এবং Print ফিচার ইমপ্লিমেন্ট করা

Google Charts API-এর মধ্যে Export এবং Print করার জন্য দুটি সাধারণ উপায় রয়েছে:

  1. Export as PNG/PDF: আপনি JavaScript এর মাধ্যমে Google Charts এর ডেটাকে PNG বা PDF ফরম্যাটে এক্সপোর্ট করতে পারেন।
  2. Print Chart: আপনি JavaScript বা CSS ব্যবহার করে সরাসরি চার্টের প্রিন্ট অপশন তৈরি করতে পারেন।

1. Export as PNG/PDF

Exporting charts as PNG বা PDF এর জন্য, Google Charts API সরাসরি কোনো ইন্টিগ্রেটেড ফিচার প্রদান না করলেও আপনি google.visualization.events.addListener এবং html2canvas লাইব্রেরি ব্যবহার করে এটি করতে পারেন।

Install html2canvas for Exporting

প্রথমে html2canvas লাইব্রেরি ইন্সটল করুন, যা HTML এলিমেন্টকে ইমেজে রেন্ডার করতে সাহায্য করবে:

npm install html2canvas

app.component.ts ফাইলে Export ফাংশন তৈরি করা

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as html2canvas from 'html2canvas'; // html2canvas ইমপোর্ট

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Export and Print Chart Example';

  chartType = 'PieChart';
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  // Export Chart as PNG
  exportChartAsPNG() {
    const chartElement = document.getElementById('chart_div'); // Chart container element
    html2canvas(chartElement!).then((canvas) => {
      const imgData = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = imgData;
      link.download = 'chart.png'; // File name for download
      link.click(); // Trigger download
    });
  }

  // Print the Chart
  printChart() {
    const chartElement = document.getElementById('chart_div'); // Chart container element
    const printWindow = window.open('', '', 'width=600,height=400');
    printWindow?.document.write('<html><body><h1>Chart</h1>' + chartElement?.innerHTML + '</body></html>');
    printWindow?.document.close();
    printWindow?.print();
  }

  ngOnInit() {
    google.charts.load('current', { packages: ['corechart', 'pie'] });
    google.charts.setOnLoadCallback(this.drawChart.bind(this));
  }

  drawChart() {
    const data = google.visualization.arrayToDataTable(this.chartData);
    const chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    chart.draw(data, this.chartOptions);
  }
}

app.component.html ফাইলে Export and Print Button যোগ করা

<h1>{{ title }}</h1>

<!-- Google Chart -->
<google-chart 
  id="chart_div" 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

<!-- Buttons to Export and Print -->
<button (click)="exportChartAsPNG()">Export as PNG</button>
<button (click)="printChart()">Print Chart</button>

Explanation:

  • Export as PNG: আমরা html2canvas ব্যবহার করে চার্টের HTML এলিমেন্টকে PNG ইমেজে রূপান্তর করেছি এবং ব্যবহারকারীর কাছে ডাউনলোডের জন্য একটি লিঙ্ক তৈরি করেছি।
  • Print Chart: window.open ব্যবহার করে একটি নতুন উইন্ডো তৈরি করেছি, সেখানে চার্টের HTML কনটেন্ট রেন্ডার করেছি এবং print() মেথড দিয়ে প্রিন্ট কমান্ড ট্রিগার করেছি।

Step 3: Chart Export and Print Customization

আপনি Export এবং Print অপশনগুলোর জন্য আরও কাস্টমাইজেশন করতে পারেন:

Export Customization:

  • আপনি ফাইল এক্সটেনশন পরিবর্তন করতে পারেন, যেমন PDF বা SVG
  • ইমেজের রেজোলিউশন বা ফাইল সাইজ কাস্টমাইজ করতে পারেন।

Print Customization:

  • প্রিন্ট উইন্ডোর ফরম্যাট কাস্টমাইজ করতে পারেন (যেমন: পৃষ্ঠা মার্জিন, পৃষ্ঠা সাইজ ইত্যাদি)।
  • চার্টের পাশাপাশি অন্যান্য কনটেন্ট প্রিন্ট করার জন্য CSS ব্যবহার করতে পারেন।

2. Print Chart Using CSS (CSS দিয়ে প্রিন্ট কাস্টমাইজেশন)

CSS ব্যবহার করে আপনি প্রিন্ট প্রিভিউ কাস্টমাইজ করতে পারেন, যেমন @media print দিয়ে প্রিন্টার প্রিন্টিং স্টাইল সেট করতে।

@media print {
  body {
    font-family: Arial, sans-serif;
  }
  
  #chart_div {
    width: 100% !important;
    height: auto !important;
  }
}

এখানে, @media print এর মাধ্যমে আমরা প্রিন্ট কাস্টমাইজেশন দিয়েছি যাতে চার্টটি প্রিন্টে সঠিকভাবে ফিট হয় এবং অন্যান্য সিএসএস স্টাইল সরানো না হয়।


সারাংশ

Export and Print Options Google Charts API ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে। আপনি Export as PNG বা PDF এবং Print অপশন যোগ করে ব্যবহারকারীদের চার্টের একটি কপি ডাউনলোড বা প্রিন্ট করার সুযোগ দিতে পারেন। এর জন্য আপনি html2canvas লাইব্রেরি ব্যবহার করে চার্ট এক্সপোর্ট করতে পারেন এবং JavaScript বা CSS এর মাধ্যমে প্রিন্ট কাস্টমাইজেশন করতে পারেন।

Content added By
Promotion